<template>
  <div>
    <el-row>
      <el-col style="text-align: left;">
        <el-input
          v-model="username"
          placeholder="输入单位名称"
          :style="'width:30%;margin:5px 0px;'"
          @keyup.enter.native="search"
        >
          <el-button slot="append" @click="search">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :sm="4">
        <div class="g-title">通讯录({{total}}个）</div>
      </el-col>
      <el-col :sm="20" style="text-align:right">
        <el-button type="success" size="small" @click="toDocument">模板下载</el-button>
        <el-upload
          class="eluploadwrapper"
          :action="uploadUrl"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload"
          name="file"
          :show-file-list="false"
          accept=".xls, .xlsx"
        >
          <el-button type="info" size="small">导入</el-button>
        </el-upload>
      </el-col>
    </el-row>

    <div class="table-top">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <!-- <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        >-->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column label="单位名称" align="center">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="unit(scope.$index,scope.row)"
            >{{ scope.row.companyName}}</el-link>
          </template>
        </el-table-column>

        <el-table-column label="分管领导" width="300">
          <el-table-column prop="leaderName" label="姓名" width="120"></el-table-column>
          <el-table-column prop="leaderLandline" label="座机" width="120"></el-table-column>
          <el-table-column prop="leaderPhone" label="手机" width="120"></el-table-column>
        </el-table-column>
        <el-table-column label="管理员" width="200">
          <el-table-column prop="administratorsName" label="姓名" width="120"></el-table-column>
          <el-table-column prop="administratorsLandline" label="座机" width="120"></el-table-column>
          <el-table-column prop="administratorsPhone" label="手机" width="120"></el-table-column>
        </el-table-column>
        <el-table-column label="实际操作人员" width="200">
          <el-table-column prop="operatorName" label="姓名" width="120"></el-table-column>
          <el-table-column prop="operatorLandline" label="座机" width="120"></el-table-column>
          <el-table-column prop="operatorPhone" label="手机" width="120"></el-table-column>
        </el-table-column>
      </el-table>
      <!-- <el-row style="padding: 32px 16px;">
        <el-col>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pageSize"
            :total="total"
            :current-page="pageNo"
            @current-change="findAllLinkmans"
            @size-change="pageSizeChange"
          ></el-pagination>
        </el-col>
      </el-row>-->
    </div>
    <unit-information :dialogVisible.sync="UnitInformationVisible" :data="unitData" />
    <!-- <add :dialogVisible.sync="dialogVisible" @finish="fetchData"></add> -->
  </div>
</template>
<script>
import { axios } from "@/api/axios";
import { linkman, imports } from "@/api/linkman";
import UnitInformation from "./components/index";
import Add from "./components/add";
// 引入vuex
import { mapGetters } from "vuex";
export default {
  computed: {
    //获取左侧单位勾选的id数组 [1,2,3]
    ...mapGetters(["userInfo", "selectedComIds"]),
  },
  components: { UnitInformation, Add },
  data: function () {
    return {
      tabIndex: "1",
      username: "",
      companyId: "", //单位id
      dialogVisible: false,
      roleDialogVisible: false,
      currentPage: 1, //默认显示第一页
      total: null,
      pageNo: 1,
      totalNum: 0,
      listDataSelected: [], //选中数据
      formData: null,
      uploadFileParams: { a: 1 }, //上传文件的额外参数
      currentPage: 1, //默认显示第一页
      pageSize: 10, //默认每页显示10条
      totalNum: 0,
      unitData: null,
      comId: "",
      dialogVisible: false,
      UnitInformationVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      headers: {
        cookie: "",
      },
      tableData: [],
    };
  },
  created() {
    this.uploadUrl = this.VUE_APP_BASE_API + "/common/webupload.shtml";
    this.companyId = this.userInfo.comid;
    this.findAllLinkmans();
  },
  watch: {
    numData() {
      this.totalNum = this.tableData.length;
      // console.log(this.tableData.length);
    },
  },
  methods: {
    //检查登录名合法性
    checkName(rule, value, callback) {
      if (!value || !value.trim() || value.length == 0) {
        callback(new Error("请输入登录账户"));
      }
      var url = "/admin/checkName.do";
      axios
        .get(url, {
          params: { name: this.formData.loginname },
        })
        .then(function (data) {
          if (data.data) {
            callback();
          } else {
            callback(new Error("账户已存在"));
          }
        });
    },
    beforeUpload() {
      window.loading = this.$loading("正在上传...");
    },
    uploadSuccess(response, file, fileList) {
      let url = response.url;
      window.loading.close();
      //   this.$message("导入成功");
      this.import(url);
    },
    // 下载模板
    toDocument() {
      window.location.href =
        this.VUE_APP_BASE_API + "upload/temp/通讯录模板.xlsx";
    },
    async import(authorization) {
      if (authorization) {
        console.log(authorization);
      }
      let params = {
        dir: authorization,
      };
      let data = await imports(params);
      this.$message({
        showClose: true,
        message: data.errorMsg,
        type: "warning",
      });
      this.findAllLinkmans();
    },
    openDialog() {
      this.dialogVisible = true;
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    //显示导入组件（暂时不需要）
    // importBook() {
    //   this.dialogVisible = true;
    // },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.findAllLinkmans();
    },
    //搜索
    search() {
      this.pageNo = 1;
      this.findAllLinkmans();
    },
    unit(index, row) {
      this.comId = row.comId;
      this.unitFetchData(row.comId);
      this.UnitInformationVisible = true;
    },
    // 查询数据
    unitFetchData(comId) {
      axios("/admin/company/findCompanyById.do", "get", {
        companyId: comId,
      }).then((data) => {
        this.unitData = data;
      });
    },
    searchData(data) {
      this.tableData = [];
      let dataNode = {};
      data.forEach(function (e, inx) {
         if (e.type == 1) {
            dataNode.companyName = e.companyName;
            dataNode.comId = e.comId;
            dataNode.leaderName = e.name;
            dataNode.leaderLandline = e.zuoji;
            dataNode.leaderPhone = e.phone;
          } else if (e.type == 2) {
            dataNode.administratorsName = e.name;
            dataNode.administratorsLandline = e.zuoji;
            dataNode.administratorsPhone = e.phone;
          } else if (e.type == 3) {
            dataNode.operatorName = e.name;
            dataNode.operatorLandline = e.zuoji;
            dataNode.operatorPhone = e.phone;
          }
      });
      console.log(dataNode);
      this.tableData.push(dataNode);
    },
    dataForEach(data) {
      this.tableData = [];
      let thit_ = this;
      // console.log(data);
      data.forEach(function (e, inx) {
        // console.log(e);
        let dataNode = {};
        e.forEach(function (e, inx) {
          // console.log(e);
          if (e.type == 1) {
            dataNode.companyName = e.companyName;
            dataNode.comId = e.comId;
            dataNode.leaderName = e.name;
            dataNode.leaderLandline = e.zuoji;
            dataNode.leaderPhone = e.phone;
          } else if (e.type == 2) {
            dataNode.administratorsName = e.name;
            dataNode.administratorsLandline = e.zuoji;
            dataNode.administratorsPhone = e.phone;
          } else if (e.type == 3) {
            dataNode.operatorName = e.name;
            dataNode.operatorLandline = e.zuoji;
            dataNode.operatorPhone = e.phone;
          }
        });
         thit_.tableData.push(dataNode);
      });
    },
    async findAllLinkmans() {
      let params = {};
      if (this.username) {
        params.companyName = this.username;
      }
      if (this.companyId) {
        params.companyId = this.companyId;
      }
      let data = await linkman(params);
      let valueData = [];
      if (data.data.length == 0) {
        this.total = data.total;
        this.tableData = data.data;
      } else {
        let valueDataArray = [];
        if (this.username!=""|| this.companyId!="") {
          this.total = data.total;
          this.searchData(data.data);
        } else {
          this.dataForEach(data.data);
          console.log(valueDataArray);
          this.total = data.total;
        }
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
.g-title {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
  margin: 10px 0;
  display: inline-block;
}

.has-gutter tr th {
  background: #f5f7fa;
  border-collapse: collapse;
  border: 1px solid #ebeef5;
  text-align: center;
}

.el-table__row td {
  text-align: center;
}

.num-zong {
  display: flex;
  justify-content: space-between;
  margin-top: 19px;
}

.num-left div {
  border-left: 1px solid red;
  padding: 0px 8px;
}

.el-select {
  width: 100%;
}

.add-select {
  widows: 100%;
  display: flex;
}

.add-select .el-form-item {
  width: 33%;
}

.block {
  display: flex;
  padding: 32px 16px;
  margin-top: 22px;
}
.eluploadwrapper {
  display: inline-block;
  margin: 0 10px;
}
</style>
